<template lang="html">
	 <div id="app">
    <!--<img src="./assets/logo.png">-->
	<div class="learn">
		<!--learn-->
				<button @click="ifIsShow=!ifIsShow" class="btn btn-success">if 显示/隐藏{{ifIsShow}}</button>
			<div class="box" v-if="ifIsShow">
				<!--v-if 跟ng-if一样 把元素进行删除/显示切换-->   
				我是切换的div if
			</div>
			<br />
			<button @click="showIsShow=!showIsShow" class="btn btn-success">show 显示/隐藏{{showIsShow}}</button>
			<div class="box" v-show="showIsShow">	
					<!--v-show  跟ng-show一样，把样式切换为display:bloack/display:none来控制显示隐藏-->
				我是切换的div show
			</div>
	</div>
	 <router-view></router-view>
  </div>
</template>

<script>
	export default {
//		el: '#app',
		data () {
				return{
					ifIsShow: true,
				    showIsShow: true
				}
			}
	}

	
				

</script>

<style lang="css">
	.box{
				width:300px;
				height:300px;
				background:red;
			}
</style>